<style lang="less">
.date-picker{

}
</style>
<template>
    <ELDatePicker
        ref="datePicker"
        class="date-picker"

        :type="type"
        :size="size"
        :format="format"
        :editable="editable"
        :clearable="clearable"
        :placeholder="placeholder"
        :range-separator="rangeSeparator"
        :picker-options="pickerOptions"

        v-model="model"
    >
        <slot></slot>
    </ELDatePicker>
</template>
<script>
// import Promise from 'bluebird';
import ELDatePicker from 'element-ui/lib/date-picker';

const methods = {...ELDatePicker.methods};
Object.keys(methods).forEach(k => {
    const handler = methods[k];

    methods[k] = function(...args) {
        const datePicker = this.$refs.datePicker;

        if(datePicker) {
            handler.apply(datePicker, args);
        }
    };
});

export default {
    components: {
        ELDatePicker: ELDatePicker
    },
    data() {
        return {
            model: undefined
        };
    },
    props: {
        ...ELDatePicker.props,

        type: String,
        size: String,
        format: String,
        placeholder: String,
        rangeSeparator: String,
        editable: {
            type: Boolean,
            default: false
        },
        clearable: {
            type: Boolean,
            default: true
        },
        pickerOptions: {
            type: Object,
            default() {
                return {};
            }
        },

        value: [Date, Number]
    },
    methods: {
        ...methods,

        updateModel() {
            let val = this.value;

            if(!(val instanceof Date) && val > 0) {
                val = new Date(1000 * val);
            }

            this.model = val || null;
        }
    },
    watch: {
        value() {
            this.updateModel();
        },
        model(val) {
            if(val) {
                val = Math.floor(val.getTime() / 1000);
            }

            this.$emit('input', val || null);
        }
    },
    created() {
        this.updateModel();
    }
};
</script>
